<template>
  <div >
    <el-form ref="form" label-position="right" label-width="80px" v-if="show" :model="formData" :inline="inline">
      <el-form-item v-for="(attr,index) in formAttr" :key="index" :label="showLabel?attr.label:''">

        <!-- 输入框组件     -->
        <el-input
            clearable
            v-if="attr.type==='input'"
            :placeholder="'请输入' + attr.label"
            v-model="formData[attr.field]"
        ></el-input>

        <!-- 开关组件     -->
        <el-switch
            v-if="attr.type === 'switch'"
            v-model="formData[attr.field]"
        ></el-switch>

        <!-- 日期组件     -->
        <el-date-picker
            v-if="attr.type === 'date'"
            type="date"
            :value-format="valueFormat"
            placeholder="选择日期"
            v-model="formData[attr.field]"/>

        <!-- 下拉组件     -->
        <el-select
            v-if="attr.type === 'select'"
            :placeholder="'请选择'+attr.label"
            v-model="formData[attr.field]">
          <el-option
              v-for="opt in attr.opts"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
          ></el-option>
        </el-select>

        <!-- 日期范围    -->
        <el-date-picker
            v-if="attr.type === 'daterange'"
            v-model="formData[attr.field]"
            type="daterange"
            align="right"
            unlink-panels
            :format="format"
            :value-format="valueFormat"
            :start-placeholder="attr.label + ' - 开始'"
            range-separator="至"
            :end-placeholder="attr.label + ' - 结束'"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-form-item><slot></slot></el-form-item>

      <div style="display: flex;margin-bottom: 20px">
        <el-form-item style="margin: 0 auto">
          <el-button  icon="el-icon-search" @click="$emit('searchHandle', formData)">搜索</el-button>
          <el-button type="danger" @click="resetForm">重置</el-button>
        </el-form-item>
      </div>

    </el-form>
  </div>

</template>

<script>
export default {
  name: "AdvancedSearch",
  props: {
    show: {
      type: Boolean,
      default: true
    },
    // 表单属性
    formAttr: {
      type: Array,
      required: true,
      default: []
    },
    // 表单布局
    inline: {
      type: Boolean,
      default: true
    },
    showLabel: {
      type: Boolean,
      default: true
    },
    format: {
      type: String,
      default: "yyyy年MM月dd日"
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd"
    }
  },
  data() {
    return {
      // 数据
      formData: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    resetForm() {
      this.formData = {}
    }
  }
}
</script>

<style scoped></style>